<template>
    <div>
        <el-upload
                :class="{'el-upload-plus-hide': showPlus}"
                :action="config.baseURL + '/upload/image'"
                list-type="picture-card"
                :on-preview="showBtn"
                :limit="limit"
                ref="imgUpload"
                accept="image/*"
                :multiple="multiple"
                :file-list="tempList"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
                :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            <!--<div class="el-upload__tip" slot="tip">最多可上传{{limit}}张</div>-->
        </el-upload>
        <el-dialog :modal="false" :visible.sync="modal" width="60%">
            <img width="100%" :src="modalImg" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import config from '@/utils/config'

    export default {
        props: {
            value: {
                type: Array,
                default: []
            },
            total: {
                type: Number,
                default: 3
            },
            multiple: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            limit() {
                return this.total
            },
            showPlus() {
                return this.limit <= this.tempList.length
            }
        },
        watch: {
            value: function (val) {
                this.tempList = this.value.map(item => ({url: item}))
            }
        },
        created() {
            this.tempList = this.value.map(item => ({url: item}))
        },
        data() {
            return {
                config,
                modal: false,
                modalImg: '',

                tempList: []
            }
        },
        methods: {
            handleExceed() {
                this.$message.warning(`最多只能上传${this.limit}张!`)
            },
            handleSuccess(response, file, fileList) {
                this.tempList = fileList.map(item => ({
                    url: item.response ? item.response.data : item.url,
                    uid: item.uid
                }))

                // this.tempList.push({url: file.data, uid: fileList.uid, status: fileList.status})
                this.emitInput()
            },
            emitInput() {
                this.$emit('input', this.tempList.map(item => item.url))
            },
            handleRemove(file) {
                this.tempList = this.tempList.filter(item => item.url != file.url)
                this.emitInput()
            },
            showBtn(file) {
                this.modalImg = file.url
                this.modal = true
            },
            clearList() {
                this.$refs.imgUpload.clearFiles()
                this.tempList = []
                this.emitInput()
            }
        }
    }
</script>

<style scoped>
    .el-upload__tip {
        line-height: normal;
    }
</style>


<style>
    /* 去除上传过渡效果 */
    .el-upload-list__item {
        transition: all 0s !important;
    }

    .edit-content.el-textarea .el-textarea__inner {
        border: none;
        padding: 5px 0;
    }

    /* 控制图片上传超过限制隐藏添加按钮 */
    .el-upload-plus-hide .el-upload--picture-card {
        display: none;
        opacity: 0;
    }
  
</style>
